
<script lang="ts">
import { defineComponent, PropType } from '@vue/runtime-core';
export default defineComponent({
  // 1. data类型定义：类型断言
  data() {
    return {
      items: [] as TodoType[],
      count: 1,
      todoName: ''
    }
  },
  // 2. prop类型定义: PropType
  props: {
    title: {
      type: Object as PropType<TitleType>,
      required: true,
    }
  },
  // 3. computed: 标识函数返回值类型
  computed: {
    doubleCount(): number {
      return this.count * 2
    }
  },
  // 4. methods: 标识函数形参和返回值类型
  methods: {
    newTodo(todoName: string): TodoType {
      return {
        id: String(Math.random()),
        name: todoName,
        compledted: false
      }
    },
    addTodo(todo: TodoType): void {
      this.items.push(todo)
      this.todoName = ''
    }
  },
  created() {
    this.items.push({
      id: String(Math.random()),
      name: 'vue3',
      compledted: false
    })
  }
})
</script>
<template >
  <div class="comp">
    <h2 :style="{ 'color': title.color }">{{ title.name }}</h2>
    <p>count: {{ $store.state.count }}</p>
    <p>doubleCount: {{ doubleCount }}</p>
    <input type="text" v-model="todoName" @keydown.enter="addTodo(newTodo(todoName))" />
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped>
.comp {
  text-align: left;
}
</style>
